import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:xinxuan/controllers/integral_controller/integral_page_controller.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:get/get.dart';
import 'package:xinxuan/utils/integral_type_util.dart';
import 'package:xinxuan/utils/refresh_util.dart';

class IntegralPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: pageBgColor,
      appBar: AppBarUtil(
        title: '积分明细'
      ),
      body: GetBuilder<IntegralPageController>(
        init: IntegralPageController(),
        builder: (controller) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _typeBar(controller),
              _summaryBar(controller, context),
              controller.integralData.value.data!.length <= 0 ? Expanded(child: Container(
                alignment: Alignment.center,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Image.asset(
                      'assets/icons/icon_integral_def.png',
                      width: 273.w,
                      height: 146.h,
                    ),
                    Text(
                      '暂时无积分哦~',
                      style: TextStyle(
                        color: textSubtitleColor,
                        fontSize: 14.sp
                      ),
                    )
                  ]
                ),
              )) :
              Expanded(child: RefreshUtil.easyRefresh(
                onRefresh: () async {
                  controller.getIntegrals();
                },
                onLoad: () async {
                  controller.onLoadIntegrals();
                },
                slivers: controller.integralData.value.data!.map((item) {
                  return SliverToBoxAdapter(
                    child: InkWellUtil.shakeProofInkWell(Container(
                      padding: EdgeInsets.symmetric(horizontal: 12.w),
                      color: bgWhiteColor,
                      child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 16.h),
                        decoration: BoxDecoration(
                          border: Border(
                            top: BorderSide(
                              color: lineColor,
                              width: .5
                            )
                          )
                        ),
                        child: Row(
                          children: [
                            Image.asset(
                              IntegralTypeUtil.getIntegralTypeIcon(item.type!),
                              width: 36.w,
                              height: 36.w,
                            ),
                            SizedBox(width: 12.w),
                            Expanded(child: Row(
                              children: [
                                Expanded(child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      '${item.typeStr}',
                                      style: TextStyle(
                                        color: textBlackColor,
                                        fontSize: 16.sp,
                                        fontWeight: FontWeight.bold
                                      ),
                                    ),
                                    SizedBox(height: 2.h),
                                    Text(
                                      '${item.createdAt}',
                                      style: TextStyle(
                                        color: textSubtitleColor,
                                        fontSize: 12.sp
                                      ),
                                    )
                                  ],
                                )),
                                Text(
                                  '${item.integral}',
                                  style: TextStyle(
                                    fontSize: 16.sp,
                                    color: item.operator! > 0 ? textColorIntegralAdd : mainTextColor
                                  ),
                                )
                              ],
                            ))
                          ],
                        )
                      ),
                    ), () {
                      controller.getIntegralsDetail(item.id!);
                    }),
                  );
                }).toList()
              ))
            ],
          );
        },
      )
    );
  }

  /// 类型
  Widget _typeBar(IntegralPageController controller) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
      child: InkWellUtil.shakeProofInkWell(Container(
        height: 36.h,
        width: 90.w,
        decoration: BoxDecoration(
          color: lineColor,
          borderRadius: BorderRadius.circular(36.h)
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text(
              '${controller.integralTypeStr.value}',
              style: TextStyle(
                color: textBlackColor,
                fontSize: 14.sp
              ),
            )),
            SizedBox(width: 4.w),
            Image.asset(
              'assets/icons/icon_arrow_down_b.png',
              width: 6.w,
              height: 6.w,
            )
          ],
        ),
      ), () {
        Get.bottomSheet(Container(
          height: 300.h,
          decoration: BoxDecoration(
            color: bgWhiteColor,
            borderRadius: BorderRadius.vertical(top: Radius.circular(5.w))
          ),
          child: Column(
            children: [
              Container(
                height: 54.h,
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    InkWellUtil.shakeProofInkWell(Text(
                      '取消',
                      style: TextStyle(
                        color: textSubtitleColor,
                        fontSize: 16.sp
                      ),
                    ), () {
                      Get.back();
                    }),
                    InkWellUtil.shakeProofInkWell(Text(
                      '确认',
                      style: TextStyle(
                        color: mainTextColor,
                        fontSize: 16.sp
                      ),
                    ), () {
                      controller.determineType();
                      Get.back();
                    })
                  ],
                ),
              ),
              Expanded(
                child: ScrollConfigurationCommon(child: CupertinoPicker(
                  scrollController: controller.typeScrollController.value,
                  diameterRatio: 5.w,
                  itemExtent: 54.h, 
                  onSelectedItemChanged: (int index) {
                    controller.changeTypeIndex(index);
                  }, 
                  children: controller.integralTypeArr.map((item) {
                    return Container(
                      height: 54.h,
                      alignment: Alignment.center,
                      child: Text(
                        '${item['typeStr']}',
                        style: TextStyle(
                          color: textBlackColor,
                          fontSize: 16.sp
                        ),
                      ),
                    );
                  }).toList(),
                )),
              )
            ],
          ),
        ));
      })
    );
  }

  /// 汇总
  Widget _summaryBar(IntegralPageController controller, BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 16.h),
      color: bgWhiteColor,
      child: Row(
        children: [
          InkWellUtil.shakeProofInkWell(Container(
            alignment: Alignment.center,
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            decoration: BoxDecoration(
              border: Border(
                right: BorderSide(
                  width: .5,
                  color: lineColor,
                )
              )
            ),
            child: Obx(() => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '${controller.year}年',
                  style: TextStyle(
                    color: textSubtitleColor,
                    fontSize: 12.sp
                  ),
                ),
                Row(
                  children: [
                    Text.rich(
                      TextSpan(
                        text: '${controller.month}',
                        style: TextStyle(
                          color: textBlackColor,
                          fontSize: 22.sp,
                          fontWeight: FontWeight.bold
                        ),
                        children: [
                          TextSpan(
                            text: '月',
                            style: TextStyle(
                              color: textSubtitleColor,
                              fontSize: 14.sp
                            ),
                          ),
                          WidgetSpan(
                            child: Image.asset(
                              'assets/icons/icon_arrow_down.png',
                              width: 14.w,
                              height: 14.w,
                            )
                          )
                        ]
                      )
                    )
                  ],
                )
              ],
            )),
          ), () {
            DatePicker.showPicker(
              context,
              locale: LocaleType.zh,
              theme: DatePickerTheme(
                containerHeight: 250.h,
                cancelStyle: TextStyle(
                  color: textBlackColor,
                  fontSize: 16.sp
                ),
                doneStyle: TextStyle(
                  color: mainTextColor,
                  fontSize: 16.sp
                ),
                itemStyle: TextStyle(
                  color: textBlackColor,
                  fontSize: 18.sp
                ),
                itemHeight: 46.h
              ),
              pickerModel:  DatePickerModel(
                locale: LocaleType.zh,
                showSecondsColumn: false
              ),
              onConfirm: (DateTime value) {
                controller.changeData(value);
                controller.getIntegrals();
              }
            );
          }),
          Expanded(child: Container(
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _sumItem(title: '收入积分', value: '${controller.integralData.value.meta!.stats!.available}'),
                _sumItem(title: '消费积分', value: '${controller.integralData.value.meta!.stats!.used}'),
                _sumItem(title: '到期积分（30天内）', value: '${controller.integralData.value.meta!.stats!.expired}'),
              ],
            ),
          ))
        ],
      ),
    );
  }

  /// 汇总Item
  Widget _sumItem({ required String title, required String value }) {
    return Container(
      height: 43.h,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            title,
            style: TextStyle(
              color: textSubtitleColor,
              fontSize: 12.sp
            ),
          ),
          Text(
            value,
            style: TextStyle(
              color: textBlackColor,
              fontSize: 16.sp
            ),
          )
        ],
      ),
    );
  }
}